<template>
    <div class="course-schedule">
      <!-- 筛选条件 -->
      <div class="filter-container">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="filter-item">
              <span class="label">学年学期</span>
              <el-select v-model="term" placeholder="2024-2025-2">
                <el-option label="2024-2025-2" value="1" />
              </el-select>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="filter-item">
              <span class="label">时间模式</span>
              <el-select v-model="timeMode" placeholder="新大节2025-2">
                <el-option label="新大节2025-2" value="1" />
              </el-select>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="filter-item">
              <span class="label">周次</span>
              <el-select v-model="week" placeholder="(全部)">
                <el-option label="(全部)" value="all" />
              </el-select>
            </div>
          </el-col>
          <el-col :span="6">
            <el-button type="primary">查询</el-button>
            <el-button>导出</el-button>
          </el-col>
        </el-row>
      </div>
  
      <!-- 课程表格 -->
      <div class="schedule-table">
        <table>
          <thead>
            <tr>
              <th>节次/星期</th>
              <th v-for="day in days" :key="day">{{ day }}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="session in sessions" :key="session.time">
              <td class="session-time">{{ session.time }}</td>
              <td v-for="(course, index) in session.courses" :key="index">
                <div v-if="course" class="course-info">
                  <div class="course-name">{{ course.name }}</div>
                  <div class="teacher">{{ course.teacher }}</div>
                  <div class="class-info">{{ course.class }}</div>
                  <div class="week-range">{{ course.weeks }}</div>
                  <div class="location">{{ course.location }}</div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
  
      <!-- 操作按钮 -->
      <div class="toolbar">
        <el-button icon="ZoomIn">放大</el-button>
        <el-button icon="ZoomOut">缩小</el-button>
        <el-button type="info">备注：无</el-button>
      </div>
    </div>
  </template>
  
  <script setup name="Index">
  import { ref } from 'vue'
  import { listCourse } from '@/api/system/course'
  
  // 筛选条件
  const studentId = ref(202221110128)
  const timeMode = ref('1')
  const week = ref('all')
  
  // 星期数据
  const days = ref(['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'])
  
  // 课程数据
  const sessions = ref([])
  
  // 获取课程数据
  const fetchCourses = async () => {
    try {
      const response = await listCourse({ studentId : studentId.value})
      sessions.value = transformCourses(response.data)
    } catch (error) {
      console.error('获取课表失败:', error)
    }
  }
  
  // 转换课程数据结构
const transformCourses = (courses) => {
  // 初始化时间段结构
  const periodStructure = [
    '1-2节', '3-5节', '6-7节', 
    '8-9节', '10-12节', '13-15节'
  ]

  // 创建包含星期映射的课程结构
  const dayMap = {
    '星期一': 0,
    '星期二': 1,
    '星期三': 2,
    '星期四': 3,
    '星期五': 4,
    '星期六': 5,
    '星期日': 6
  }

  // 初始化空课程表
  const schedule = periodStructure.map(period => ({
    time: period,
    courses: Array(7).fill(null)
  }))

  // 填充课程数据
  courses.forEach(course => {
    // 找到对应时间段
    const periodIndex = periodStructure.indexOf(course.period)
    if (periodIndex === -1) return
    
    // 解析星期信息
    const dayIndex = dayMap[course.weekDay] 
    
    if (dayIndex !== undefined) {
      schedule[periodIndex].courses[dayIndex] = {
        name: course.courseName,
        teacher: course.teacherName,
        class: course.classType,
        weeks: `${course.startWeek}-${course.endWeek}`,
        location: course.classroomId ? `教室${course.classroomId}` : '无'
      }
    }
  })

  return schedule
}
  
  // 初始化获取数据
  fetchCourses()
  </script>
  
  <style scoped lang="scss">
  .course-schedule {
    padding: 20px;
    background: #fff;
  
    .filter-container {
      margin-bottom: 20px;
      .filter-item {
        display: flex;
        align-items: center;
        .label {
          width: 70px;
          margin-right: 10px;
          color: #606266;
        }
      }
    }
  
    .schedule-table {
      border: 1px solid #ebeef5;
      table {
        width: 100%;
        border-collapse: collapse;
        th, td {
          border: 1px solid #e6e6e6;
          padding: 12px;
          font-size: 13px;
          line-height: 1.5;
        }
        th {
          background: #f8f9fa;
          color: #333;
          font-weight: 600;
        }
        td {
          vertical-align: top;
          min-width: 180px;
        }
        .session-time {
          background: #f8f9fa;
          text-align: center;
        }
      }
    }
  
    .toolbar {
      margin-top: 15px;
      text-align: center;
    }
  
    .course-info {
      .course-name {
        color: #333;
        font-weight: 500;
        margin-bottom: 4px;
      }
      .teacher, .class-info, .week-range {
        color: #666;
        font-size: 12px;
      }
      .location {
        color: #409eff;
        font-size: 12px;
        margin-top: 4px;
      }
    }
  }
  </style>